<template>
  <div class="administrator">
    <!-- 管理员列表 -->
    <!-- 账号查询 -->
    <div class="devSearch">
      <el-select class="select1" v-model="value1" placeholder="账号">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="height:40px"
        />
      </el-select>
      <el-input
        class="input1"
        v-model="input"
        placeholder="请输入搜索内容"
        input-style="height:45px;width:250px;"
      />
      <el-button
        type="warning"
        @click="searchClickHandler"
        style="margin-left: 100px"
        >查询</el-button>
      <!-- 新增管理员 -->
      <div class="addminbutton"><addminBtn @click="addHandler"/></div>
    </div>
    <!-- 管理员列表 -->
    <el-table  class="tableEl"  :data="data" style="width: 96%;margin-top: -10px;" :header-cell-style="{ background: '#C9DAFF' }">
      <el-table-column prop="usernum" label="管理员账号" width="180"  />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="js" label="角色" />
      <el-table-column prop="bz" label="备注" />
      <el-table-column prop="lasttime" label="最后登录时间" />
      <el-table-column prop="lip" label="最后登录IP" />
      <el-table-column label="操作">
        <template #default="scope">
          <a @click="edit(scope.row.usernum, 1)">编辑</a> &nbsp;&nbsp;
          <a @click="edit(scope.row.usernum, 0)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <addminForm v-if="dialogFormVisible" v-model="dialogFormVisible"  @click="handler" :datar="editdata"/>
    
    <!-- 分页 -->
    <span class="total">共{{ total }}条记录</span>
    <el-pagination
      small
      background
      layout="sizes,prev, pager, next,jumper"
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[10, 20, 30, 40]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      popper-class="页"
      :total="50"
      class="mt-4"
      style="margin-right: 50px;"
    />
  </div>
</template>

<script setup>
import { useUserList } from "./hook.js";
import { ref, watch, reactive } from "vue";
import addminBtn from "@/views/user_management/adminui/addminBtn.vue";
import {removeUidToUserApi,getUidToUserApi} from '@/api/adminuserApi.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import addminForm from "./adminui/addminForm.vue";
let dialogFormVisible=ref(false)
let [data, tableData, total] = useUserList();

const options = [
  {
    value: "usernum",
    label: "账号",
  },
  {
    value: "name",
    label: "姓名",
  },
];
const input = ref("");
const value1 = ref("");
let searchData = reactive(null);
const searchClickHandler = async () => {
  if(value1.value=='name'){
    searchData = {
      name: input.value,
  };
  }else{
    searchData = {
    usernum: input.value,
  };
  }
  let ret = await tableData(1, searchData);
};
// const tableData=[{
//   usernum:'admin',
//   name:'管理员',
//   js:'超级管理员',
//   bz:"",
//   lasttime:'2023-04-21 22:00:05',
//   lip:'183.69.214.167',
// }]
let editdata=ref();
const edit = async (item, index) => {
  if (index == 1) {
    console.log(11);
    let ret=await getUidToUserApi(item);
    // console.log(ret.data);
    editdata.value=ret.data;
    // console.log(editdata.value);
    dialogFormVisible.value = true
    // console.log("编辑");
  } else {
    ElMessageBox.confirm(
    '确定要删除此管理员吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let ret=await removeUidToUserApi(item);
      data.value=ret.data.adminusers;
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消啦',
      })
    })
    // console.log("删除");
  }
};
const currentPage2 = ref(2);
const pageSize2 = ref(10);

const handleSizeChange = (pageSizes) => {
  pageSize2.value = pageSizes;
};
const handleCurrentChange = async (currentPage) => {
  currentPage2.value = currentPage;
};


watch(pageSize2, async (tableData11) => {
  let ret = await tableData(1, null, pageSize2.value);
});
watch(currentPage2, async (tableData11) => {
  let ret = await tableData(currentPage2.value, null, pageSize2.value);
});
const addHandler=(item)=>{
  data.value=item;
}

const emit = defineEmits(['click'])
  const handler=async (form)=>{
    dialogFormVisible.value=false
    if(form==1){
    }else{
      let ret = await addAdminUserApi(form);
      console.log(ret.data.adminusers);
      emit('click',ret.data.adminusers)
    }
    
    // let [data, tableData, total] = useUserList();
    // dialogFormVisible = false
  }
</script>

<style lang="scss">
.addminbutton{
  float: right;
  margin-right: 50px;
}
.devSearch{
  margin-bottom: 30px;
}
.select1 {
  width: 100px;
  height: 30px;
  margin: 0 10px 16px 0;
}

// .el-select.el-input__inner{
//     height:45px;
// }
.el-select .el-input__wrapper {
  height: 45px;
}
.el-select .el-input.is-focus .el-input__wrapper {
  height: 45px;
}
.mt-4 {
  float: right;
}
.administrator {
  width: 100%;
  // overflow: hidden;
}
.total {
  // margin-top:38px;
  margin-left: 38px;
  font-size: 14px;
}
// .el-table_1_column_1 is-leaf el-table__cell{
//     background:yellow
// }
</style>
